<!DOCTYPE html>
<html lang="en">
<head th:replace="_fragment::head(~{::title})">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../static/lib/typo/typo.css">
    <title>博客详情</title>
</head>
<body>
<!--    导航-->
    <nav th:replace="_fragment::menu(1)" class="ui inverted attached segment m-padded-tb-mini">
        <div class="ui container">
            <div class="ui inverted secondary menu">
                <h2 class="ui teal header item">大鱼</h2>
                <a href="#" class="item"><i class=" home icon"></i>首页</a>
                <a href="#" class="item"><i class=" idea icon"></i>分类</a>
                <a href="#" class="item"><i class=" tags icon"></i>标签</a>
                <a href="#" class="item"><i class=" clone icon"></i>归档</a>
                <a href="#" class="item"><i class=" info icon"></i>关于我</a>
                <div class="right item">
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>

    </nav>
<!--中间内容-->
    <div class="m-padded-tb-large" style="max-width: 60em;margin: auto;">
        <div class="ui container">
            <div class="ui segment">
                <div class="ui top attached segment">
                    <div class="ui horizontal link list">
                        <div class="item">
                            <img th:src="@{/images/1.jpg}" class="ui avatar image">
                            <div class="content"><a href="#" class="header">张大鱼</a></div>
                        </div>
                        <div class="item">
                            <i class="calender icon"></i><span th:text="${#dates.format(blog.getUpdateTime(),'yyyy-MM-dd')}">2022-8-7</span>
                        </div>
                        <div class="item">
                            <i class="eye icon"></i><span th:text="${blog.getViews()}">223</span>
                        </div>
                    </div>
                </div>
                <div class="ui attached segment">
<!--                    图片区域-->
                    <img th:src="${blog.getFirstPicture()}" src="https://pica.zhimg.com/v2-ab9f466dec512cbfa94747c524b7cf5a_1440w.jpg?source=172ae18b" class="ui fluid rounded image">
                </div>
                <div class="ui attached segment">
<!--                    内容-->
                    <div class="ui right aligned basic segment">
                        <div class="ui orange basic label" th:text="${blog.getFlag()}">原创</div>
                    </div>

                    <h2 class="ui center aligned header" th:text="${blog.getTitle()}">我的青春恋爱物语果然有问题</h2>

                    <div th:text="${blog.getContent()}" id="content" class="typo typo-selection" style="padding-left: 4em;padding-right: 4em">
                        <p>【1】：温柔正确的人总是难以生存，因为这世界既不温柔，也不正确 </p>
                        <p>【2】：努力是不会背叛自己的，虽然梦想会背叛。 努力不一定能实现梦想，但是曾经努力过的事实却足以安慰自己。</p>
                        <p>【3】：要让一群人团结起来，需要的不是英明的领导，而是共同的敌人</p>
                        <p>【4】：没有期待就没有失望，没有羁绊就不会受伤。</p>
                        <p>【5】：我讨厌温柔的女孩子。温柔的女孩子其实对所有人都温柔，我却会误以为只对我温柔， 然后就沾沾自喜得意忘形，最后闹得不欢而散，双方都受到伤害。--所以我才讨厌温柔的女孩子。 </p>
                        <p>【6】：孤独的人不会伤害别人，只会不断地伤害自己罢了。</p>
                        <p>【7】：这世上真正的好人和坏人都很少，大部分都是普通人。平时随波逐流，关键时刻则会出于自我保护 而露出獠牙--然而正是因为这样才可怕。</p>
                        <p>【8】：大家互相帮助，一起成功，一起幸福什么的，不过是种理想。 现实中，有人幸福，就必定有人被抛弃 有人光鲜，就必须有人满身泥泞。</p>
                        <p>【9】：只有弱者才喜欢扎堆，问题是绝大部分人都是弱者。</p>
                        <p></p>
                    </div>
<!--                    标签-->
                    <br/>
                    <div style="padding-left: 4em;padding-right: 4em">
                        <div class="ui basic teal left label" >
                           <span th:text="${blog.getType()}">大老师</span>
                        </div>
                    </div>
                </div>
                <div class="ui attached positive message">
<!--                    博客信息-->
                    <div class="ui grid">
                        <div class="eleven wide column">
                            <ul class="list">
                                <li>作者: <span>张大鱼</span></li>
                                <li>发表时间: <sapn th:text="${#dates.format(blog.getCreateTime(),'yyyy-MM-dd HH:mm')}"></sapn></li>
                            </ul>
                        </div>
                        <div class="five wide column">

                        </div>
                    </div>
                </div>
                <div  class="ui bottom attached segment">
<!--                    留言区域列表-->
                    <div id="comment-container"  class="ui teal basic segment">
                        <div th:fragment="commentList">
                            <div class="ui comments">
                                <h3 class="ui dividing header">评论</h3>
                                <div class="comment" th:each="comment:${comments}">
                                    <a class="avatar">
                                        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.177f6547446e4371d1eb981c961cc503?rik=DEVz%2fsuB%2f7OeKw&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2fallimg%2f160919%2f1-1609191605020-L.png&ehk=LFT3qOExbBGsvDoYmp%2foMvQjpfc3%2bOPZBFtUieGkz00%3d&risl=&pid=ImgRaw&r=0">
                                    </a>
                                    <div class="content">
                                        <a class="author" th:text="${comment.getNickname()}">Matt</a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(comment.getCreateTime(),'yyyy-MM-dd HH:mm')}">今天下午 5:42</span>
                                        </div>
                                        <div class="text" th:text="${comment.getContent()}">太赞了！ </div>
                                        <div class="actions">
                                            <a th:attr="data-commentid=${comment.getId()},data-commentnickname=${comment.getNickname()}" data-commentid="1" data-commentnickname="Matt" onclick="reply(this)" class="reply">回复</a>
                                        </div>
                                    </div>
                                    <div class="comments" th:if="${comment.getCommentList().size()>0}" >
                                        <div class="comment" th:each="reply:${comment.getCommentList()}">
                                            <a class="avatar">
                                                <img src="https://ts1.cn.mm.bing.net/th/id/R-C.177f6547446e4371d1eb981c961cc503?rik=DEVz%2fsuB%2f7OeKw&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2fallimg%2f160919%2f1-1609191605020-L.png&ehk=LFT3qOExbBGsvDoYmp%2foMvQjpfc3%2bOPZBFtUieGkz00%3d&risl=&pid=ImgRaw&r=0">
                                            </a>
                                            <div class="content">
                                                <a class="author">
                                                    <span th:text="${reply.getNickname()}">Matt</span>@ <span th:text="${reply.getUsername()}" style="color: #00B5AD"></span>
                                                </a>
                                                <div class="metadata">
                                                    <span class="date" th:text="${#dates.format(reply.getCreateTime(),'yyyy-MM-dd HH:mm')}">今天下午 5:42</span>
                                                </div>
                                                <div class="text" th:text="${reply.getContent()}">太赞了！ </div>
                                                <div class="actions">
                                                    <a th:attr="data-commentid=${reply.getId()},data-commentnickname=${reply.getNickname()}" data-commentid="1" data-commentnickname="Matt" onclick="reply(this)" class="reply">回复</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
<!--/*-->
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005">
                                    </a>
                                    <div class="content">
                                        <a class="author">Elliot Fu</a>
                                        <div class="metadata">
                                            <span class="date">昨天上午12:30</span>
                                        </div>
                                        <div class="text">
                                            <p>這對我的研究是非常有用.謝謝!</p>
                                        </div>
                                        <div class="actions">
                                            <a class="reply">Reply</a>
                                        </div>
                                    </div>
                                    <div class="comments">
                                        <div class="comment">
                                            <a class="avatar">
                                                <img src="https://unsplash.it/100/100?image=1005">
                                            </a>
                                            <div class="content">
                                                <a class="author">Jenny Hess</a>
                                                <div class="metadata">
                                                    <span class="date">刚刚</span>
                                                </div>
                                                <div class="text">艾略特你永远是多么正确 :) </div>
                                                <div class="actions">
                                                    <a class="reply">Reply</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005">
                                    </a>
                                    <div class="content">
                                        <a class="author">Joe Henderson</a>
                                        <div class="metadata">
                                            <span class="date">5 天以前</span>
                                        </div>
                                        <div class="text">老兄，这太棒了。非常感谢。 </div>
                                        <div class="actions">
                                            <a class="reply">Reply</a>
                                        </div>
                                    </div>
                                </div>
<!--*/-->
                            </div>
                        </div>
                    </div>

                    <form class="ui reply form">
                        <input type="hidden" name="blog_id" th:value="${blog.getId()}">
                        <input type="hidden" name="parent_id" value="-1">
                        <div class="field">
                            <textarea name="content" placeholder="请输入评论信息..."></textarea>
                        </div>
                        <div class="two fields">
                            <div class="ui left icon field input ">
                                <i class="address card icon"></i>
                                <input type="text" name="nickname" class="item" placeholder="昵称">
                            </div>
                            <div class="ui left icon field input ">
                                <i class="envelope icon"></i>
                                <input type="email" name="email" class="item" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="ui right aligned container">
                            <button id="comment-btn" type="button" class="ui teal button"><i class="icon edit"></i>发布</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<!--底部footer-->
    <footer th:replace="_fragment::footer" class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/images/1.jpg" class="ui rounded image" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">故事</a>
                        <a href="#" class="item">故事</a>
                        <a href="#" class="item">故事</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emile:748835228@qq.com</a>
                        <a href="#" class="item">QQ: 748835228</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <p>111111111111111111111111111111</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>

        </div>
    </footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>

    $('.ui.form').form({
        fields : {
            nickname : {
                identifier: 'nickname',
                rules: [{
                    type : 'empty',
                    prompt: '请输入用户名'
                }]
            },
            content : {
                identifier: 'content',
                rules: [{
                    type : 'empty',
                    prompt: '请输入评论内容'
                }]
            },
            email : {
                identifier: 'email',
                rules: [{
                    type : 'empty',
                    prompt: '请输入邮箱'
                }]
            },
        }
    });

    $('#comment-btn').click(function (){
        var boo = $('.ui.form').form('validate form');
        if(boo){
            postDate();
        }else{
            console.log("校验失败")
        }
    });

    function postDate(){
        $("#comment-container").load("/commentSearch",{
            "blog_id":$("[name='blog_id']").val(),
            "nickname":$("[name='nickname']").val(),
            "email":$("[name='email']").val(),
            "content":$("[name='content']").val(),
            "parent_id":$("[name='parent_id']").val()
        },function (responseTxt, statusTxt, xhr){
            clearContent();
        });
    }

    function clearContent(){
        $("[name='content']").val('');
        $("[name='parent_id']").val(-1);
        $("[name='content']").attr("placeholder","请输入评论信息...");
    };

    function reply(obj){
        let commentId = $(obj).data('commentid');
        let commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder","@"+commentNickname).focus();
        $("[name='parent_id']").val(commentId);

    }
</script>
</body>
</html>